<template>
	<div class="page">
		<div class="head">
			<div class="bg"></div>
			<div class="bg2"></div>

			<div class="title">
				<div class="icon-box">
					<img src="./保障.svg" alt="" />
				</div>
				领取成功
			</div>
		</div>
		<div class="radius"></div>

		<!-- <div class="main">
			<flex-box
				justify="space-between"
				class="line"
				v-for="spec in result.spec"
				:key="spec.key"
			>
				<span style="max-width: 80%">{{ spec.key }}</span>
				<span>{{ spec.value }}</span>
			</flex-box>
			<div class="line" v-if="!result.spec || !result.spec.length">
				暂无信息
			</div>
		</div> -->
	</div>
</template>

<script>
export default {
	data() {
		return {
			result: null
		}
	},
	computed: {},
	mounted() {},
	methods: {},
	components: {}
}
</script>

<style lang="scss" scoped="scoped">
.head {
	height: 54vw;
	position: relative;
	background: #ff8d4d;
	overflow: hidden;
	z-index: 1;

	.bg {
		width: 60vw;
		height: 60vw;
		background-image: linear-gradient(64deg, transparent, #ff9d63);
		border-radius: 50%;
		position: absolute;
		right: -25vw;
		top: 25vw;
	}

	.bg2 {
		width: 40vw;
		height: 40vw;
		background-image: linear-gradient(-45deg, transparent, #fd985d),
			linear-gradient(64deg, transparent, #ff9d63);
		border-radius: 50%;
		position: absolute;
		left: -15vw;
		top: -15vw;
	}

	.title {
		font-size: 54px;
		color: rgba(255, 255, 255, 0.9);
		text-align: center;
		padding-top: 84px;

		img {
			width: 144px;
			height: auto;
			display: block;
			margin: auto;
			margin-bottom: 50px;
		}
	}

	.icon-box {
		position: relative;

		&::before {
			content: '';
			@include abs;
			background-image: linear-gradient(
				0deg,
				rgb(255, 142, 77, 0.3),
				rgb(255, 142, 77, 0.04)
			);
		}
	}
}
.radius {
	position: relative;
	left: 50%;
	margin-top: -8vw;
	border-style: solid;
	border-bottom-width: 15vw;
	border-left-width: 63vw;
	border-right-width: 62vw;
	transform: translateX(-50%);
	border-color: #ff8d4d;
	border-bottom-left-radius: 50%;
	border-bottom-right-radius: 50%;
}

.page {
	position: relative;
	padding: 0;
	overflow-x: hidden;
}

.main {
	position: relative;
	border-radius: 8px;
	margin: -74px $space_3 40px;
	min-height: 200px;
	background: #fff;
	z-index: 2;
	box-shadow: 5px 10px 10px rgba(0, 0, 0, 0.05);

	.line {
		padding: $space_5 $space_3;
		border-bottom: 1px solid #cfcfcf;
		line-height: 1.4;
	}
}
</style>
